<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link href="/URMS/lib/layui-v2.5.5/css/layui.css" media="all" rel="stylesheet">
    <link href="/URMS/css/public.css" media="all" rel="stylesheet">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table class="layui-table" id="menu-table" lay-filter="menu-table"></table>
        </div>
    </div>
</div>


<!-- 操作列 -->
<script id="auth-state" type="text/html">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
</script>

<script id="add-Menu" type="text/html">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="addMenu"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>

<script charset="utf-8" src="/URMS/lib/layui-v2.5.5/layui.js"></script>
<script charset="utf-8" src="/URMS/js/lay-config.js?v=1.0.4"></script>
<script>
    layui.use(['table', 'treetable', "layer"], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        let renderTable = function () {
            treetable.render({
                treeColIndex: 1, //树形图标显示在第几列
                treeSpid: 0,     //最上级的id
                treeIdName: 'id',  //id字段的名称
                treePidName: 'parentid', //pid字段的名称
                elem: '#menu-table',
                url: '/URMS/sysMenu/selectAllMenu',
                toolbar: '#add-Menu',
                page: false,
                cols: [
                    [
                        {type: "radio", field: 'left'},
                        {field: 'name', minWidth: 120, title: '权限名称'},
                        {field: 'appurl', minWidth: 120, title: '权限url'},
                        {
                            field: 'imgurl', minWidth: 120, title: '图标url',
                            // templet: function (item) {
                            //     return item.imgurl == null ? '' : '<i class="' + item.imgurl + ' fa-lg"></i>';
                            // }
                        },
                        {field: 'sortcode', width: 120, align: 'center', title: '排序号'},
                        {
                            title: '状态', width: 100, field: 'right', align: 'center',
                            templet: function (data) {
                                let res;

                                if (data.status == 1) {
                                    res = "<div><a class=\"layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled\" style='background-color: #009f95'>可用</a></div>"
                                } else {
                                    res = "<div><a class=\"layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled\" style='background-color: red'> 禁用</a></div>"
                                }
                                return res;
                            }
                        },
                        {
                            field: 'menutype', width: 150, align: 'center',
                            templet: function (d) {
                                if (d.menutype == 1) {
                                    return '<span class="layui-badge layui-bg-gray">按钮</span>';
                                }
                                if (d.parentid == 0) {
                                    return '<span class="layui-badge layui-bg-blue">目录</span>';
                                } else {
                                    return '<span class="layui-badge-rim">菜单</span>';
                                }
                            },
                            title: '类型'
                        },
                        {title: '操作', width: 200, field: 'right', align: 'center', toolbar: '#auth-state',}
                    ]
                ],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }
        renderTable()

        $('#btn-expand').click(function () {
            treetable.expandAll('#menu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#menu-table');
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(menu-table)', function (obj) {
            if (obj.eve === 'addMenu') {  // 监听添加操作
                var index = layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/URMS/sysMenu/addMenu'
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === "refresh") {
                renderTable();
            }
        });

        //监听工具条
        table.on('tool(menu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (layEvent) {
                case 'del':
                    layer.msg('删除' + data.id);
                    break;
                case "edit":
                    layer.msg('修改' + data.id);
                    var index = layer.open({
                        title: '添加菜单',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/URMS/sysMenu/edit?id=' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case "add":
                    var index = layer.open({
                        title: '添加菜单',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/URMS/sysMenu/add'
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
            }

        });
    });
</script>
</body>
</html>